<template>
	<view class="main-cont box box-tb">
		<view class="list box box-align-center box-pack-between">
			<view class="left box box-align-center box-pack-start">
				<view class="icon"></view>
				<view class="ml15  box box-tb box-align-start">
					<view class="class-name">
						{{clazz.name||''}}
					</view>
					<view class="tab box box-align-center box-pack-center">
						<u-image src="/static/home/icon_group1.png" width="30rpx" height="26rpx"></u-image>
						<view class="ml10">
							{{clazz.num||''}}人
						</view>
					</view>
				</view>
			</view>
			<view class="">
				代课老师 ：{{clazz.tr ==null?'暂无代课老师':clazz.tr}}
			</view>
		</view>
		<view class="group">
			<view class="bottom">
				<view class="stu-list box box-align-center box-pack-between" v-for="(item,i) in stuList" :key="i">
					<view class="box box-align-center box-pack-start">
						<u-avatar :src="item.icon" size="73"></u-avatar>
						<view class="ml5 mr5 stu-name">
							{{item.name}}
						</view>
					</view>
					<view class="xh">
						{{item.sn!=null?item.sn:"无学号"}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dclass:uni.getStorageSync("dclass"),
				clazz:{},
				stuList:[],
			}
		},
		onLoad() {
			this.listClassStu();
		},
		methods: {
			listClassStu(){
				this.$api.post({url: '/yevalgroup/listClassStu',method: 'post'}, {classid:this.dclass.id}).then(res => {
					this.stuList = res.list;
					console.log(res);
					this.clazz = res.clazz;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.main-cont{
		width: 100%;
		
		.list{
			padding: 0 39rpx;
			width: 100%;
			height: 140rpx;
			background: #FFFFFF;
			
			.icon {
				width: 8rpx;
				height: 84rpx;
				background: #FE907E;
				border-radius: 4rpx;
			}
			
			.class-name {
				font-size: 32rpx;
			}
			
			.tab {
				font-size: 26rpx;
				color: #6E73D8;
			}
			
			.edit {
				width: 168rpx;
				height: 46rpx;
				line-height: 46rpx;
				background: #626BF1;
				border-radius: 23rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
			}
		}
		
		.group {
			margin: 20rpx 14rpx;
			width: 722rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			
			.top {
				padding: 0 39rpx;
				height: 98rpx;
				line-height: 98rpx;
				border: 2rpx solid #F0F1F8;
			}
			
			.bottom {
				
				.stu-list {
					padding: 0 60rpx;
					height: 130rpx;
				}
				
				.stu-name {
					font-size: 28rpx;
					color: #181623;
				}
				
				.tab {
					width: 86rpx;
					height: 28rpx;
					line-height: 28rpx;
					background: #FFE2CC;
					border-radius: 5rpx;
					text-align: center;
					font-size:24rpx;
					color: #E96501;
				}
			}
		}
	}
</style>
